Zero-runtime CSS

概要

JavaScript または TypeScript のコードに CSS を直接記述するよう設計されたライブラリ

ビルド時に実際の CSS ファイルを生成する

Runtime CSS-in-JS と比較したときのメリット

1. パフォーマンス

実行中にスタイルを動的に生成・注入するオーバーヘッドがないため、ページの読み込み速度やレンダリング速度が向上する可能性がある

2. 予測可能性

スタイルがビルド時に生成されるため、実行中に予期せぬスタイルの変更や副作用が発生するリスクが低くなる

3. 小さなバンドルサイズ

不要なランタイムコードを削除することで、最終的なバンドルサイズを削減することができる

4. SSR の簡素化

SSR 時の追加の設定や手順がを緩和または解消できる

5. 静的解析の利点

スタイルがビルド時に生成されるため、ツールや Linter が静的にスタイルを解析しやすい

6. 環境の互換性

実行中にスタイルを動的に注入することが難しいか、推奨されていない環境下でも問題なく動作する

ライブラリ